<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    #parse("include/header.html")
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
            overflow: auto;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="当前任务" name="0">当前任务</el-tab-pane>
            <el-tab-pane label="后续待办" name="1">后续待办</el-tab-pane>
            <el-tab-pane label="已完成任务" name="2">已完成</el-tab-pane>
            <el-tab-pane label="已终止任务" name="3">已完成</el-tab-pane>
        </el-tabs>
        <el-card class="box-card">
            <el-table
                    :data="tableData"
                    style="width: 100%" stripe @cell-click="toCommand">
                <el-table-column
                        prop="content"
                        label="任务内容">
                </el-table-column>
                <el-table-column
                        prop="percentage"
                        label="完成进度"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="200">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==0">待处理</div>
                        <div v-if="scope.row.status==1">处理中</div>
                        <div v-if="scope.row.status==2">已完成</div>
                        <div v-if="scope.row.status==3">已终止</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTimeStr"
                        label="创建日期"
                        sortable
                        width="300"
                >
                </el-table-column>
            </el-table>
        </el-card>
        <div>&nbsp;</div>
    </div>
</div>
#parse("include/footer.html")
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //查询任务数据
    window.onload = function () {
        app.queryTaskList("","0");
       // app.abc();
    }
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                activeName: '0',
                tableData: [],
                //searchTab: '',
            }
        },
        methods: {
            queryTaskList:function(taskNameOr,taskStatus) {
                var taskNameOrId = "";
                if(!taskNameOr){
                    taskNameOrId = taskNameOr;
                }
                var taskData =  $.ajax({
                    type:"POST",
                    url:'../../pms/task/list',
                    async:false,
                    data : {
                        taskNameOrId : taskNameOrId
                    },
                   success: function(msg){
                        var taskData = eval("(" + msg + ")");
                        return taskData.taskList;
                        //return  msg ;
                    }
                });
                var aftdata = eval("(" + taskData.responseJSON + ")");
                this.tableData=aftdata.taskList;
            },
            edit: function () {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'edit_task.html')
            },
            /*abc: function () {
                this.tableData = taskDataList
            },*/
            formatter: function (row, column) {
                return row.address;
            },
            filterTag: function (value, row) {
                return row.tag === value;
            },
            filterHandler: function (value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            handleClick: function (tab, event) {
                //alert("标题"+tab.name)
                queryTaskList("",tab.name)
                this.searchTab = tab.name;
                //this.tableData = taskDataList
            },
            toCommand: function (row, column, cell, event) {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'command_detail.html');
            }
        }

    })
</script>
</body>
</html>
